<!--
 * @Description: 轮播通知
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-05-06 16:59:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-10-16 17:17:58
-->
<template>
  <div v-show="props.list.length > 0" class="broadcast items-center">
    <!-- 第一段 -->
    <div
      v-if="broadcast.startList.length > 0"
      class="items-center"
      :class="{
        'broadcast-firstStart': !broadcast.isLoad && firstEnd,
        'broadcast-firstStart1':
          broadcast.isLoad && firstStart.length > 0 && firstStart,
        'broadcast-pause': isPause,
      }"
      style="will-change: transform"
      ref="firstRef"
      @animationiteration="broadcastEnd(1)"
    >
      <!-- @click.stop="pauseClick(item)" -->
      <div
        v-for="(item, index) in broadcast.startList"
        :key="item.id"
        class="broadcast-item items-center"
        :style="{ 'margin-right': `${broadcast.firstSpace}px` }"
      >
        <div class="broadcast-item-img">
          <Images
            :src="item.avatar"
            :placeholder="imgUrl.avatarDefault"
            isHttp
          ></Images>
        </div>

        <div class="broadcast-item-info items-center">
          <div
            class="broadcast-item-nick"
            style="min-width: 28px; text-align: center"
          >
            {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
            <span style="margin-left: -4px">
              {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
            </span>
          </div>
          <!-- <van-popover
            class="popover-bg"
            placement="top-end"
            :offset="[0, 13]"
            v-model:show="item.showPopover"
            @close="closePopover(item)"
            @click-overlay="isPause = false"
          >
            <div class="popover-text">哈哈哈哈哈哈哈哈哈</div>
            <template #reference>
              <span
                class="broadcast-item-nick"
                style="min-width: 55px; text-align: center"
                >{{ $t("mvp.mining.text13") }}</span
              >
            </template>
          </van-popover> -->
          <div
            class="broadcast-item-nick"
            style="min-width: 55px; text-align: center"
            >{{ $t("mvp.mining.text13") }}</div
          >
          <div class="broadcast-item-bdc">{{ item.acquireAmount }}</div>
          <div class="broadcast-item-nick">BDC</div>
          <div class="items-center" style="min-width: 39px">
            {{ item.miningtext }}
          </div>
        </div>
      </div>
    </div>
    <!-- 第二段 -->
    <div
      v-if="broadcast.endList.length > 0"
      class="items-center"
      :class="{
        'broadcast-secondStart': secondStart,
        'broadcast-pause': isPause,
      }"
      style="will-change: transform"
      ref="secondRef"
      @animationiteration="broadcastEnd(2)"
    >
      <!-- @click.stop="pauseClick(item)" -->
      <div
        v-for="(item, index) in broadcast.endList"
        :key="item.id"
        class="broadcast-item items-center"
        :style="{ 'margin-right': `${broadcast.secondSpace}px` }"
      >
        <div class="broadcast-item-img">
          <Images
            :src="item.avatar"
            :placeholder="imgUrl.avatarDefault"
            isHttp
          ></Images>
        </div>
        <div class="broadcast-item-info items-center">
          <div
            class="broadcast-item-nick"
            style="min-width: 28px; text-align: center"
          >
            {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
            <span style="margin-left: -4px">
              {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
            </span>
          </div>

          <!-- <van-popover
            class="popover-bg"
            placement="top"
            :offset="[0, 13]"
            v-model:show="item.showPopover"
            @close="closePopover(item)"
            @click-overlay="isPause = false"
          >
            <div class="popover-text">哈哈哈哈哈哈哈哈哈</div>
            <template #reference>
              <div
                class="broadcast-item-nick"
                style="min-width: 55px; text-align: center"
              >
                {{ $t("mvp.mining.text13") }}
              </div>
            </template>
          </van-popover> -->
          <div
            class="broadcast-item-nick"
            style="min-width: 55px; text-align: center"
          >
            {{ $t("mvp.mining.text13") }}
          </div>
          <div class="broadcast-item-bdc">{{ item.acquireAmount }}</div>
          <div class="broadcast-item-nick">BDC</div>
          <div class="items-center" style="min-width: 39px">
            {{ item.miningtext }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="broadcast">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { getOssFileUrl } from "@/utils";

const props = withDefaults(
  defineProps<{
    list: any;
    loop?: boolean;
  }>(),
  {
    list: [],
    loop: false,
  }
);
const emit = defineEmits(["end"]);

const imgUrl = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const broadcast = reactive({
  firstSpace: 12, // 两个元素的右边间距
  secondSpace: 12, // 两个元素的右边间距
  endIdx: 0, // 3 也是组件最小长度
  list: [],
  startList: [],
  endList: [],
  pace: 3,
  isLoad: false, // 第一段动画是否加载
  animationIdx: 0,
});

// 一次动画结束:展示了两段数据
const broadcastEnd = (type: number) => {
  // console.log("-broadcastEndbroadcastEnd--", type);
  broadcast.animationIdx = type;
  // 1. 赋值新数据
  if (type == 1) {
    broadcast.startList = broadcast.list.slice(
      broadcast.endIdx,
      broadcast.endIdx + broadcast.pace
    );
    nextTick(() => {
      if (!broadcast.isLoad) broadcast.isLoad = true;
    });
  }
  if (type == 2) {
    broadcast.endList = broadcast.list.slice(
      broadcast.endIdx,
      broadcast.endIdx + broadcast.pace
    );
  }
  // 2. 重新计算 endIdx
  broadcast.endIdx = broadcast.endIdx + broadcast.pace;
  // console.log(type, "--type--", broadcast.endIdx);

  // 4. 如果设置了循环,则重置要截取的索引值
  if (broadcast.endIdx >= broadcast.list.length && props.loop) {
    broadcast.endIdx = 0;
  } else {
    emit("end");
  }
};

const firstRef = ref(null);
const secondRef = ref(null);
const firstStart = ref(""); // 第一段:开始位置
const firstEnd = ref(""); // 第一段:结束位置
const secondStart = ref(""); // 第二段:开始位置
const secondEnd = ref(""); // 第二段:结束位置

const jisuanKd = () => {
  let offsetWidth = 0;
  if (firstRef.value && secondRef.value) {
    offsetWidth = Math.max(
      secondRef.value.offsetWidth,
      firstRef.value.offsetWidth
    );
    // console.log(
    //   "11:",
    //   firstRef.value.offsetWidth,
    //   "22",
    //   secondRef.value.offsetWidth,
    //   "same:",
    //   offsetWidth
    // );
  }
  if (broadcast.animationIdx == 0) {
    if (firstRef.value && firstEnd.value != `-${offsetWidth}px`) {
      firstEnd.value = `-${offsetWidth}px`;
      secondStart.value = `${offsetWidth}px`;
    }
    if (secondRef.value && secondEnd.value != `-${offsetWidth}px`) {
      secondEnd.value = `-${offsetWidth}px`;
    }
    //
    // console.log(
    //   firstStart.value,
    //   "--111111--firstStart-初始值-111111--",
    //   firstEnd.value
    // );
    // console.log(
    //   secondStart.value,
    //   "-222222-secondEnd.value-初始值-222222-",
    //   secondEnd.value
    // );
  } else if (broadcast.animationIdx == 1) {
    if (firstEnd.value != `-${offsetWidth}px`) {
      firstEnd.value = `-${offsetWidth}px`;
    }
    if (firstStart.value != `${offsetWidth}px`) {
      firstStart.value = `${offsetWidth}px`;
    }

    // console.log("第一段动画结束:-从", firstStart.value, "--开始");
    // console.log("到:", firstEnd.value);
  } else if (broadcast.animationIdx == 2) {
    if (secondStart.value != `${offsetWidth}px`) {
      secondStart.value = `${offsetWidth}px`;
    }
    if (secondEnd.value != `-${offsetWidth}px`) {
      secondEnd.value = `-${offsetWidth}px`;
    }
    // console.log("第二段动画结束:--222222-从:", secondStart.value);
    // console.log("到:", secondEnd.value);
  }
};

// 重新计算每个元素的-右间距,让两个段保持一样的宽度
const keepSameWidth = () => {
  if (firstRef.value && secondRef.value) {
    const difference = firstRef.value.offsetWidth - secondRef.value.offsetWidth;
    if (difference >= 0) {
      broadcast.secondSpace = broadcast.secondSpace + difference / 3;
    } else {
      broadcast.firstSpace = broadcast.firstSpace - difference / 3;
    }
  }
};
watch(
  () => broadcast.startList,
  (newVal) => {
    keepSameWidth();
    nextTick(() => {
      jisuanKd();
    });
  },
  {
    immediate: true,
  }
);
watch(
  () => broadcast.endList,
  (newVal) => {
    keepSameWidth();
    nextTick(() => {
      jisuanKd();
    });
  },
  {
    immediate: true,
  }
);

const init = () => {
  if (!props.list || props.list.length <= 0) return;
  // mock 数据
  if (props.list.length % broadcast.pace !== 0 || props.list.length <= 6) {
    broadcast.list = props.list.concat(props.list).concat(props.list);
  } else {
    broadcast.list = props.list;
  }

  // 初始值,默认broadcast.pace 个数一段,可以自定义,当前是 3 个一段
  broadcast.endIdx = broadcast.pace;
  // 截取第一段
  broadcast.startList = broadcast.list.slice(0, broadcast.endIdx);
  // 截取第二段
  broadcast.endList = broadcast.list.slice(
    broadcast.endIdx,
    broadcast.endIdx + broadcast.pace
  );
  broadcast.endIdx += broadcast.pace; // 注意:数组长度至少大于 6
};
watch(
  () => props.list,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      init();
    }
  }
);

onMounted(() => {
  init();
});

// Popover 关闭事件
// const closePopover = (item: any) => {
//   // console.log("--closePopover--", item.id);
//   isPause.value = false;
// };

// 暂停,并提示获取来源
const isPause = ref(false);
// const pauseClick = (val: any) => {
//   // console.log(selectItemId.value, "--selectItemId--", val.id);
//   isPause.value = true;
//   if (val.showPopover) {
//     val.showPopover = false;
//   } else {
//     val.showPopover = true;
//   }
// };
</script>
<style scoped lang="scss">
.popover {
  &-text {
    padding: 6 * 2px 12 * 2px;
    color: #fff;
    font-size: 11 * 2px;
  }
}

.broadcast {
  transform: translate3d(0, 0, 0); // 启用硬件加速
  @keyframes leftgroup {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(v-bind("firstEnd"));
    }
  }
  @keyframes leftgroup1 {
    from {
      transform: translateX(v-bind("firstStart"));
    }
    to {
      transform: translateX(v-bind("firstEnd"));
    }
  }
  @keyframes leftgroup2 {
    from {
      transform: translateX(v-bind("secondStart"));
    }
    to {
      transform: translateX(v-bind("secondEnd"));
    }
  }

  position: relative;
  width: 100vw;
  height: 30 * 2px;
  overflow: hidden;

  &-firstStart {
    transform: translate3d(0, 0, 0); // 启用硬件加速
    position: absolute;
    animation: leftgroup 18s linear infinite;
  }
  &-firstStart1 {
    transform: translate3d(0, 0, 0); // 启用硬件加速
    position: absolute;
    animation: leftgroup1 36s linear infinite !important;
  }
  &-secondStart {
    transform: translate3d(0, 0, 0); // 启用硬件加速
    position: absolute;
    animation: leftgroup2 36s linear infinite;
  }
  &-pause {
    animation-play-state: paused !important;
  }
  &-item {
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    padding: 2 * 2px 0;

    &-img {
      overflow: hidden;
      min-width: 14 * 2px !important;
      max-width: 14 * 2px !important;
      height: 14 * 2px;
      border-radius: 100px;
      border: 1px solid #4aa1ff;
      margin: 0 9 * 2px;
    }
    &-info {
      height: 18 * 2px;
      margin-right: 6 * 2px;
    }
    &-nick {
      color: #fff;
      font-size: 11 * 2px;
      text-wrap: nowrap;
      white-space: nowrap;
      margin-right: 9 * 2px;
    }
    &-bdc {
      margin-right: 9 * 2px;
      color: #007bff;
      font-size: 11 * 2px;
      font-weight: 590;
    }
  }
}
</style>
<style lang="scss">
.popover-bg {
  .van-popover__content {
    background: transparent !important;
  }
  .van-popover__arrow {
    color: rgba(0, 0, 0, 0.3);
  }
  .van-popover__content {
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
  }
}
</style>
